<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        min-width: 1280px;
    }
    .HTPlay{
        padding: 30px
    }
    .HTPlay .main{
        width: 94%;
        margin: 0 auto
    }
    .HTPlay .main .left{
        display: inline-block;
        width: 28%;
        vertical-align: top
    }
    .HTPlay .main .left ul{
        list-style: none;
        display: inline-block;
    }
    .HTPlay .main .left ul li{
        width: 241px;
        height: 66px;
        margin-bottom: 33px;
        text-align: center;
        background: url(img/HTPlay/bg-btns.png) center bottom;
        cursor: pointer;
        position: relative;
    }
    .HTPlay .main .left ul li img{
        margin-top: 6%;
        z-index: -1;
    }
    .HTPlay .main .left ul li.active{
        background: url(img/HTPlay/bg-btns.png) center top;
        cursor:unset;
    }
    .HTPlay .main .left ul li.active::after{
        content: '';
        position: absolute;
        left: 250px;
        top: 20px;
        z-index: 2;
        width: 0;
        height: 0;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 18px solid #0c1e3f;
        border-right: 0;
    }
    .HTPlay .main .right{
        width: 60%;
        display: inline-block;
        vertical-align: top;
    }
    .HTPlay .main .right ul{
        list-style: none
    }
    .HTPlay .main .right ul li .title{
        display: block;
        width: 80%;
        /* border-bottom: 2px solid black; */
        position: relative;
    }
    .HTPlay .main .right ul li .title::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #000;
    }
    .HTPlay .main .right ul li .title>img{
        display: block;
        border-bottom: 2px solid black;
        padding-bottom: 8px;
    }
    .HTPlay .main .right ul li span{
        display: block;
        font-size: 18px;
        line-height: 24px;
        margin: 20px 0;
        color: #0a132c;
    }
    .HTPlay .main .right ul li>img{
        width: 100%;
    }
    .HTPlay .main .right ul li{
        display: none;
    }
    .HTPlay .main .right ul li.active{
        display: block
    }
</style>
<body>
    <div class="HTPlay">
        <div class="main">
            <div class="left">
                <ul>
                    <li class="HTPlay_1 active"><img src="./img/HTPlay/txt-howtoplay-1.png" alt=""></li>
                    <li class="HTPlay_2"><img src="./img/HTPlay/txt-howtoplay-2.png" alt=""></li>
                    <li class="HTPlay_3"><img src="./img/HTPlay/txt-howtoplay-3.png" alt=""></li>
                    <li class="HTPlay_4"><img src="./img/HTPlay/txt-howtoplay-4.png" alt=""></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li class="HTPlay_1 active">
                        <div class="title">
                            <img src="./img/HTPlay/title-howtoplay-1.png" alt="">
                        </div>
                        <span>
                            故事是通过可以说是Fate原点的文本游戏方式进行的。『命运 冠位指定』的故事是由包括原作者奈绪蘑菇在内的Fate系列作家阵容为本游戏全新撰写的，超过100万字超大量主线剧情。全7章的主线剧情会将人类史上的7个时代作为故事的舞台。同时登场的所有从者都有个人剧情。玩家可从中欣赏身为御主的您与从者的故事，或是从者们之间的故事。掌握着各从者剧情关键的，是身为御主的您与从者之间的羁绊。
                        </span>
                        <img src="./img/HTPlay/img-howtoplay-cn-1.png" alt="">
                    </li>
                    <li class="HTPlay_2">
                        <div class="title">
                            <img src="./img/HTPlay/title-howtoplay-2.png" alt="">
                        </div>
                        <span>
                            在『命运 冠位指定』中，战斗通过对从者下达的命令用指令卡来表现，通过回合制的形式展开指令战斗。战斗分为战术阶段与指令阶段，根据御主的选择，从者会分别发动攻击。己方攻击后，转为敌方行动。敌方行动后一回合结束。
                        </span>
                        <img src="./img/HTPlay/img-howtoplay-cn-2.png" alt="">
                    </li>
                    <li class="HTPlay_3">
                        <div class="title">
                            <img src="./img/HTPlay/title-howtoplay-3.png" alt="">
                        </div>
                        <span>
                                蕴含了从者力量的卡称为「圣肖像」。成为你同伴的从者们都会以圣肖像来表现。将不同从者进行合成，可让强化对象的从者获得经验值。通过将从者和战斗过程中获得的道具「碎片」进行合成，可完成灵基再临（突破极限），进化成更为强大的存在
                        </span>
                        <img src="./img/HTPlay/img-howtoplay-cn-3.png" alt="">
                    </li>
                    <li class="HTPlay_4">
                        <div class="title">
                            <img src="./img/HTPlay/title-howtoplay-4.png" alt="">
                        </div>
                        <span>
                                不仅是从者，御主（玩家角色）也会成长。战斗胜利后获得的经验值（EXP）在累计到一定值后，御主的等级将会提升。等级提升后，行动力、COST（影响可编入队伍的从者。）、好友人数上限会提升。并且御主通过装备不同的魔术礼装，自身的技能（御主技能）也会发生变化。
                        </span>
                        <img src="./img/HTPlay/img-howtoplay-cn-4.png" alt="">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script src="./js/jquery-1.11.3.js"></script>
    <script>
        $('.HTPlay .main .left ul li').click(function(){
            $li = $(this)
            console.log($li)
            $li.addClass("active").siblings().removeClass("active")
            var txt = $li.attr("class").slice(0,9)
            console.log(txt)
            $(`.HTPlay .main .right ul li.${txt}`).addClass("active").siblings().removeClass("active")
        })
    </script>
</body>
</html>